import { onHide } from '@dcloudio/uni-app';
<!--
 * @Description:
 * @Date: 2024-05-14 09:00:16
 * @LastEditTime: 2024-08-26 14:57:19
-->
<route lang="json5" type="mine">
{
  style: {
    navigationBarTitleText: '预约服务',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>
<template>
  <wd-notice-bar
    type="danger"
    text="审核通过后请记住房间号，前往视频接访进行视频！"
    :scrollable="false"
  />
  <view class="w-screen h-screen flex flex-col p-20rpx box-border pt-0 bg-#ffffff">
    <div class="interview">
      <div class="interview-item" v-for="interview in interviewList" :key="interview.id">
        <span @click="toDetails(interview)">
          <div class="interview-item__title">
            <span>{{ interview.acceptTime }}</span>
            <div class="ml-auto service-tag" :style="tagStyle(interview, 'style')">
              {{ tagStyle(interview, 'content') }}
            </div>
          </div>
          <div class="interview-item__content">
            <div class="flex">
              <span class="mr-4">检察官</span>
              <span>{{ interview.acceptUserName }}</span>
            </div>
            <div class="flex mt-1">
              <span class="mr-4">预约时段</span>
              <span>{{ interview.requestTime }}</span>
            </div>
          </div>
        </span>
        <div class="interview-item__btns">
          <span v-if="interview.status === '2'">
            <span style="color: #db3934" class="mr-2">
              {{ `房间号：${interview.meetingNumber}` }}
            </span>
            <wd-button size="small" @click.stop="toInterviewMeeting">立即前往视频</wd-button>
          </span>
        </div>
        <div v-if="interview.status === '3'" class="mt-4">
          <span style="color: #db3934">{{ `驳回原因：${interview.auditingContent}` }}</span>
        </div>
      </div>
    </div>
    <wd-status-tip
      v-if="interviewList.length == 0"
      :image-size="{
        height: 200,
        width: 300,
      }"
      image="search"
      tip="当前搜索无结果"
    />
    <wd-loadmore v-if="interviewList.length > 0" :state="loadState" @reload="loadmore" />
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store'
import { useToast, useMessage } from 'wot-design-uni'
import { getJianChaListAPI } from '@/service/index/foo'

const message = useMessage()
const toast = useToast()
const baseurl = import.meta.env.VITE_SERVER_BASEURL
const userStore = useUserStore()

const max = ref(60)
const loadState = ref('loading')
const interviewList = ref([])
const filterDateList = ref([])
const pages = reactive({
  pageNo: 1,
  pageSize: 10,
})

onShow(() => {
  interviewList.value.length = 0
  getInterviewList()
})

onReachBottom(() => {
  if (interviewList.value.length === max.value) {
    loadState.value = 'finished'
  } else if (interviewList.value.length < max.value) {
    pages.pageNo += 1
    loadmore()
  }
})

onPullDownRefresh(async () => {
  pages.pageNo = 1
  interviewList.value.length = 0
  getInterviewList()
  uni.stopPullDownRefresh()
})

function loadmore() {
  loadState.value = 'loading'
  setTimeout(() => {
    getInterviewList()
  }, 1000)
}

// 获取列表数据
function getInterviewList() {
  const timeList = filterDateList.value.length
    ? [filterDateList.value[filterDateList.value.length - 1], filterDateList.value[0]]
    : []
  const params = {
    pageNo: pages.pageNo,
    pageSize: pages.pageSize,
    openId: userStore.userInfo.openid,
    acceptTime: timeList.length ? timeList.join(',') : null,
  }
  getJianChaListAPI(params).then((res) => {
    interviewList.value.push(...res.data.list)
    max.value = res.data.total
    interviewList.value.length === max.value
      ? (loadState.value = 'finished')
      : (loadState.value = 'loading')
    console.log('get list', res)
  })
}
// 详情
function toDetails(interview) {
  uni.navigateTo({
    url: `/pages/mine/serviceDetails?id=${interview.id}`,
  })
}
// 前往接访视频
function toInterviewMeeting() {
  uni.navigateTo({ url: '/pages/menu/videoCall/index' })
}

function tagStyle(interview, type) {
  const status = interview.status
  const styleObj = {
    1: {
      color: '#e75000',
      background: '#fff0db',
    },
    2: {
      color: '#002af6',
      background: '#dbf4ff',
    },
    3: {
      color: '#f70b00',
      background: '#ffede7',
    },
    4: {
      color: '#6b6b6b',
      background: '#f0f0f0',
    },
  }
  const contentObj = {
    1: '审核中',
    2: '审核通过',
    3: '审核驳回',
  }
  return type === 'style'
    ? {
        color: styleObj[status]?.color,
        background: styleObj[status]?.background,
      }
    : contentObj[status]
}
</script>
<style lang="scss" scoped>
.date {
  display: flex;
  align-items: center;
  padding: 0px 8px;
  margin-top: 8px;
}

.interview {
  padding: 4px 8px;

  &-item {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    margin-bottom: 16px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 5px #f0f0f0 !important;

    &__title {
      display: flex;
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: bold;
    }

    &__content {
      display: flex;
      flex-direction: column;
      margin-bottom: 4px;
      font-size: 14px;
    }

    &__btns {
      text-align: right;
    }
  }
}

.service-tag {
  height: 18px;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 20px;
}

::v-deep .wd-radio__label {
  color: #006dff;
  background: #fff !important;
  border: 2rpx solid #649dff !important;
  border-radius: 10rpx !important;
}

::v-deep .is-checked > .wd-radio__label {
  color: #fff !important;
  background: #006eff !important;
  border: none !important;
}
</style>
